<template>
    <div class="photoinfo-container">
        <!--标题-->
        <h3>{{ dataInfo.id }}</h3>
        <hr/>
        <!--作者及发表日期-->
        <div class="subtitle">

            <span>发表时间：{{ dataInfo.add_time |dateFormat }}</span>
            <span>点击次数： {{ dataInfo.click}}次</span>
        </div>

        <!--缩略图-->
        <div class="thumbs">
            <!--<img class="preview-img" v-for="(item, index) in list" :src="item.src" height="100" @click="$preview.open(index, list)">-->
            <vue-preview
                    :list="list"
                    :thumbImageStyle="{width: '80px', height: '80px', margin: '10px'}"
                    :previewBoxStyle="{border: '1px solid #eee'}"
                    :tapToClose="true"

            />
        </div>
        <!--下面这种方式是vue2-preview的-->


        <!--文章内容-->
        <div class="content" v-html="dataInfo.content">
        </div>

        <!--评论区，引入子组件即可，通过parentId传值-->
        <comment-box :parentId="id"></comment-box>
    </div>
</template>

<script>
    import {Toast} from "mint-ui"

    import comment from "../../subcomponents/Comment.vue"

    export default {
        data(){
            return {
                id : this.$route.params.id,
                dataInfo:{},
                list:[]
            }
        },
        created(){
            this.getPhotoBypid();
            this.getThumbnailData();
        },
        methods:{
            //根据图片id获得图片的基本信息
            getPhotoBypid(){
                this.$http.get('api/getimageInfo/' + this.id).then(result => {
                    result = result.body;
                    if(result.status === 0){
                        this.dataInfo = result.message[0];
                    }else{
                        Toast("获取内容失败");
                    }
                });
            },
            //根据图片id获得缩略图信息
            getThumbnailData(){
                this.$http.get("api/getthumimages/" + this.id).then(result => {
                    if(result.body.status === 0){
                        result.body.message.forEach(item=>{
                            item.w = 600;
                            item.h = 400;
                            item.msrc = item.src;
                        })
                        this.list = result.body.message;
                    }else{
                        Toast("获取缩略图失败！");
                    }
                })
            }
        },
        components:{
            "comment-box":comment
        }

    }
</script>

<style scoped>

    h3 {
        color: #26a2ff;
        font-size: 15px;
        text-align: center;
        margin: 15px 0;
    }

    .subtitle {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
    }

    .content {
        font-size: 13px;
        line-height: 30px;
    }

    .photoinfo-container {
        padding: 3px;
    }

    .thumbs img{
        margin: 10px;
        box-shadow: 0 0 8px #999;
    }
</style>